<!--  -->
<template>
  <div class="footer container"> 
    <div class="left"><img src="../assets/img/Logo.png" alt="">
      <div class="left-title">
        <h2>用心做宠物商城</h2>
        <h2>诚心欢迎每一位顾客的光临</h2>
      </div>
    </div>
    <div class="center"><div class="wechat"><span>微信公众号</span>
      <img src="../assets/img/erweima.png" alt="微信公众号">
    </div><div class="business"><span>联系商家</span>
      <img src="../assets/img/erweima.png" alt="联系商家"></div></div>
    <div class="right">免费咨询热线：0311-11223344</div>
  </div>
</template>

<script>
export default {
  name:"Footer",
  data () {
    return {
    };
  },

}

</script>
<style lang='less' scoped>
@import '../assets/css/total.less';
.footer{
  height: 200px;
  background-color: rgb(33, 43, 57);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  .left{
    display: flex;
    img{
      height: 100px;
      width: 120px;
      margin:0 30px; 
    };
    .left-title{
      :nth-child(1){
        margin: 20px 0;
      }
    }
  }
  .center{
    font-size: 20px;
    display: flex;
    .wechat {
      margin-right: 50px;
      cursor: pointer;
      position: relative;
      img{
        display: none;
        height: 100px;
        width: 100px;
        position: absolute;
        top :50%;
        left: 50%;
        margin-left: -150px;
        margin-top: -50px;
      }
      &:hover{
        img{display: block;}
      }
    }
    .business {
      margin-right: 50px;
      cursor: pointer;
      position: relative;
      img{
        display: none;
        height: 100px;
        width: 100px;
        position: absolute;
        top :50%;
        left: 50%;
        margin-left: 50px;
        margin-top: -50px;
      }
      &:hover{
        img{
          display: block;
          }
      }
    }
  }
  .right{
    margin-right: 30px;
    font-size: 20px;
  }
}
</style>